<template>
<div class="recom">
    <!--轮播图区域-->
    <swiper v-if="swiperFlag" :swiperImg="swiperImg" />
    <!--推荐歌单-->
    <personalized :personalizedList="personalizedList" />
    <!--独家放送-->
    <exclusive :privatecontent="privatecontent" />
</div>
</template>

<script>
// 引入swiper
import swiper from '../../components/common/swiper/swiper'
// 引入每日推荐组件
import personalized from '../../components/content/personRecom/personalized'
// 引入独家放送
import exclusive from '../../components/content/personRecom/exclusive'
import {
    _getBanners,
    _getPersonalized,
    _getPrivatecontent,
    _getRecommendResource
} from '../../network/findMusic'
import bus from '../../util/bus'
export default {
    name: 'recom',
    data() {
        return {
            // 延迟轮播图按钮点击
            flag: true,
            // 当前轮播图高亮index
            currentSwiperIndex: 0,
            // 定时轮播标志
            timer: null,
            swiperImg: [

            ],
            personalizedList: [

            ],
            privatecontent: [

            ],
            swiperFlag: false,
        }
    },
    computed: {

    },
    created() {
        console.log(this.$route)
        this.getBanners()
        // 判断是否登录，获取相应歌单
        if (sessionStorage.getItem('cloud_cookie')) {
            this.getRecommendResource(sessionStorage.getItem('cloud_cookie'))
        } else {
            this.getPersonalized()
        }
        this.getPrivatecontent()
        bus.$on('isLogin', (res => {
            if (res) {
                this.getRecommendResource(res)
            }
        }))

    },
    mounted() {},
    methods: {
        // 请求轮播图数据
        getBanners() {
            _getBanners()
                .then(res => {
                    this.swiperImg = res.data.banners.slice(0, 5)
                    this.swiperFlag = true
                })
        },
        // 每日推荐歌单
        getRecommendResource(cookie) {
            _getRecommendResource(cookie)
                .then(res => {
                    this.personalizedList = res.data.recommend.slice(0, 11)
                })
        },
        // 推荐歌单
        getPersonalized() {
            _getPersonalized(12)
                .then(res => {
                    this.personalizedList = res.data.result
                })
        },
        // 独家放送
        getPrivatecontent() {
            _getPrivatecontent()
                .then(res => {
                    this.privatecontent = res.data.result
                })
        }
    },
    components: {
        swiper,
        personalized,
        exclusive
    }
}
</script>

<style lang="less" scoped>
@itemecolor: #c62f2f;
@more: #666666;
@textColor: #fff;
@title: 20px;

.position_flex(@jc: space-between, @ai: center) {
    display: flex;
    align-items: @ai;
    justify-content: @jc;
}

.recom {
    // margin-top: 49px;
    width: 100%;
}

.personalized,
.exclusive {
    color: @textColor;

}
</style>
